<template>
	<view>
		<scroll-view scroll-x class="scroll-row border-bottom unshow-scrollbar " :scroll-into-view="srcollInfo"
		 scroll-with-animation style="height: 100rpx;">
			<view v-for="(item,index ) in tabbars " :class="tabIndex===index?'text-main font-lg font-weight-bold':''" @click="handleTab(index)"
			 :key="index" :id="'tab'+index" class="scroll-row-item px-5 py-3 ">
				{{item.name}}
			</view>
		</scroll-view>
		
		<swiper :style="'height:'+ scrollH+'px;'" duration="500" :current="tabIndex" @change="onChangeTab">
			<swiper-item v-for="(item,index) in newList" :key="index">
				<scroll-view scroll-y :style="'height:'+scrollH+'px;'" @scrolltolower="loadmore(index)">
					<template v-if="item.list.length>0">
						<block v-for="(item2, index2 ) in item.list" :key="index2">
							<topic-list :data="item2"></topic-list>
						</block>
						<loadmore :loadmore="item.loadmore"v-if="item.list.length>10"></loadmore>
					</template>
					<template v-else>
						<view class="flex flex-column justify-center align-center">
							<image src="../../static/common/nothing.png" mode="widthFix" style="width: 500rpx; height: 500rpx;"></image>
							<view class="noImgText">
								没有更多数据了
							</view>
						</view>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	var demoData = [

		{
			cover: "/static/demo/topicpic/1.jpeg",
			title: "#话题名称#",
			desc: '话题描述：',
			today_count: 23,
			news_count: 3,
		},

		{
			cover: "/static/demo/topicpic/1.jpeg",
			title: "#话题名称#",
			desc: '话题描述：',
			today_count: 23,
			news_count: 3,
		},

		{
			cover: "/static/demo/topicpic/1.jpeg",
			title: "#话题名称#",
			desc: '话题描述：',
			today_count: 23,
			news_count: 3,
		},
		{
			cover: "/static/demo/topicpic/1.jpeg",
			title: "#话题名称#",
			desc: '话题描述：',
			today_count: 23,
			news_count: 3,
		},
		
		{
			cover: "/static/demo/topicpic/1.jpeg",
			title: "#话题名称#",
			desc: '话题描述：',
			today_count: 23,
			news_count: 3,
		},
		
		{
			cover: "/static/demo/topicpic/1.jpeg",
			title: "#话题名称#",
			desc: '话题描述：',
			today_count: 23,
			news_count: 3,
		},
		
		{
			cover: "/static/demo/topicpic/1.jpeg",
			title: "#话题名称#",
			desc: '话题描述：',
			today_count: 23,
			news_count: 3,
		},
		{
			cover: "/static/demo/topicpic/1.jpeg",
			title: "#话题名称#",
			desc: '话题描述：',
			today_count: 23,
			news_count: 3,
		},
		{
			cover: "/static/demo/topicpic/1.jpeg",
			title: "#话题名称#",
			desc: '话题描述：',
			today_count: 23,
			news_count: 3,
		},
		
		{
			cover: "/static/demo/topicpic/1.jpeg",
			title: "#话题名称#",
			desc: '话题描述：',
			today_count: 23,
			news_count: 3,
		},
		
		{
			cover: "/static/demo/topicpic/1.jpeg",
			title: "#话题名称#",
			desc: '话题描述：',
			today_count: 23,
			news_count: 3,
		},
		{
			cover: "/static/demo/topicpic/1.jpeg",
			title: "#话题名称#",
			desc: '话题描述：',
			today_count: 23,
			news_count: 3,
		}
	]
	import divider from "@/components/common/divider.vue"
	import loadmore from '@/components/common/loadmore.vue'
	import topicList from "../../components/news/topic-list/topic-list.vue"
	export default {
		components: {
			topicList,
			divider,
			loadmore
		},
		data() {
			return {
				srcollInfo: "",
				//scrollview的高度
				scrollH: "",
				//tabbaers
				tabIndex: 0,
				scrollInfo: "",
				tabbars: [{
						name: "关注",
					}, {
						name: "推荐"
					},
					{
						name: "体育"
					},
					{
						name: "热点"
					},
					{
						name: "财经"
					},
					{
						name: "娱乐"
					},
					{
						name: "军事"
					},
					{
						name: "历史"
					}
				],
				newList: [],
			}
		},
		//监听导航栏的钩子
		onNavigationBarSearchInputClicked() {
			//点击去到搜索页面
			uni.navigateTo({
				url: '../search/search'
			});

		},

		//点击进入自定义导航页面
		onNavigationBarButtonTap(val) {
			console.log("val", val)

			uni.navigateTo({
				url: '../add-input/add-input'
			});

		},

		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight - uni.upx2px(102)
				}
			})
		},

		mounted() {
			this.getData()
		},

		methods: {

			getData() {
				let arr = []
				for (let i = 0; i < this.tabbars.length; i++) {

					let obj = {
						loadmore: "上拉加载更多",
						list: []

					}
					if (i < 3) {
						obj.list = demoData
					}
					arr.push(obj)
				}
				this.newList = arr
			},
			//关注或者没有关注
			follow(index) {
				this.newList[this.tabIndex].list[index].isFollow = !(this.newList[this.tabIndex].list[index].isFollow)
			},
			//点赞和踩赞
			onSupport(val, index) {
				console.log(this.list)
				let obj = this.newList[this.tabIndex].list[index].support
				let msg = val.type == "support" ? "顶" : "踩"
				if (val === "support" && val !== obj.type) {
					if (obj.type == "") {
						obj.type = val;
						obj.support_count += 1;
					} else {
						obj.type = val;
						obj.support_count += 1;
						obj.unsupport_count -= 1;
					}

				} else if (val === "unsupport" && obj.type !== val) {
					if (obj.type == "") {
						obj.type = val;
						obj.unsupport_count += 1;
					} else {
						obj.type = val;
						obj.unsupport_count += 1;
						obj.support_count -= 1;
					}

				}
				uni.showToast({
					title: msg + "成功"
				})

			},
			//选择tab
			handleTab(index) {
				if (this.tabIndex === index) {
					return
				}
				this.tabIndex = index;
				this.scrollInfo = 'tab' + index;
			},
			//滑动swiper事件
			onChangeTab(e) {
				let index = e.detail.current
				this.handleTab(index)

			},
			//触底事件

			loadmore(index) {
				let item = this.newList[index]
				if (item.loadmore !== "上拉加载更多") return
				item.loadmore = '加载中……';
				setTimeout(() => {
					item.list = [...item.list, ...item.list]
					this.newList[index].loadmore = '上拉加载更多';
				}, 2000)


			}

		}
	}
</script>

<style scoped>
	/deep/.unshow-scrollbar .uni-scroll-view ::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	.tabActive {
		color: #ff5a7c;

	}
	
</style>
